<template>
	<div  class="mainApp itemMain u-flex_col">
		<div class="itemTit"><div>第2学期设想</div><div class="num">{{content  ?  content.length :0}}/300</div></div>
		<div class="tit">本学期，我可要从品德、学习、健体、特长培养等方面好好打算一番！</div>
		<textarea rows="18" maxlength="300" v-model="content" @blur="checkWrite"   @focus="$focus" placeholder="请输入内容，最多300字"></textarea>

		<div class="profileBtn">
			<div class="backHome"  @click="returnHome">返回首页</div>
			<div class="submit" @click="submit">提交</div>
		</div>
		<van-dialog v-model="Dialogshow" title="提示" className="dialog" show-cancel-button confirmButtonColor="#168DFF" cancelButtonColor="#B6B8B8" @confirm="sureReturn">
				<div class="content"> 输入内容将失效，确认返回首页？</div>
		</van-dialog>
	</div>
		
</template>

<script>
import {axPost,axGet} from '@/api/index'
/** 
 *输入框只允许输入中文英文数字小数点和空格  解决用户输入表情包问题
 * onkeyup="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\. ]/g,'')" onpaste="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')" oncontextmenu = "value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,'')"
 */
export default {
	name:'term',
	data(){
		return{
			content:'',
			school:localStorage.getItem('school'),
			userid:localStorage.getItem('userid'),
			Dialogshow:false
		}
	},
	mounted(){
		this.$nextTick(()=>{
			this.getContent()
			if (window.history && window.history.pushState) {
				// 往历史记录里面添加一条新的当前页面的url
				history.pushState(null, null, document.URL);
				// 给 popstate 绑定一个方法 监听页面刷新
				window.addEventListener('popstate', this.returnHome, false);//false阻止默认事件
			}
		})
	},
	destroyed(){
		window.removeEventListener('popstate', this.returnHome, false);//false阻止默认事件
	},
  methods: {
		checkWrite(){
			this.$blur()
			sessionStorage.setItem('hasChange4',true)
		},
		getContent(){
			axPost('ChangQingGetImagineRecord',{
				school:this.school,
				userid:this.userid,
			}).then(res=>{
				if(res.ResultCode == 1){
						this.content = res.Value.Content
				}
			})
		},
	  submit(){
			if(this.content == '' || this.content == null){
				this.$Tips({
					content:'提交内容不能为空',
				})
				return
			}
			axPost('ChangQingAddOrUpdateImagineRecord',{
				school:this.school,
				userid:this.userid,
				content:this.content
			}).then(res=>{
				if(res.ResultCode == 1){
					 sessionStorage.getItem('hasChange4') &&  sessionStorage.removeItem('hasChange4')
						this.$Tips({
								content:'提交成功',
								icon:'correct'
						})
				}
			})
		},
		returnHome(){
			if(sessionStorage.getItem('hasChange4')){
				this.Dialogshow =true
				history.pushState(null, null, document.URL);
			}else{
				this.$router.push('/home')
			}
			
		},
		sureReturn(){
			sessionStorage.getItem('hasChange4') &&  sessionStorage.removeItem('hasChange4')
			this.$router.push('/home')
		}
  },
}
</script>

<style lang="scss" scoped>
 .dialog /deep/{
    //  width: 3.54rem;
        .van-dialog__header{
            color: #262627;
            font-size: .36rem;
						font-weight: 800;
						padding-top: .24rem;
        }
        .content{
            color: #262627;
            font-size: .32rem;
            text-align: center;
            height: 1.4rem;
            line-height: 1.4rem;
        }
    }
.itemMain{
	padding:.3rem;
	.itemTit{
		width: 100%;
		font-size: .32rem;
		color: #262727;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
		.num{
				color: #B6B8B8;
				font-size: .24rem;
				font-weight: normal;
		}
		}
	  .tit{
		  color: #999999;
		  font-size: .28rem;
		  margin-top: .2rem;
	  }
		textarea{
			margin-top: .2rem;
			border: #E4E5E6 1px solid;
			padding:.12rem;
			width: 100%;
			resize: none;
		}
		.profileBtn{
			position: absolute;
			bottom: .4rem;
		}
}
  
</style>